import React, {Component} from 'react'
import './index.css'

class Count extends Component {
  state = {
    value: 0,
    delta: 1
  }

  handleSelect = e => {
    this.setState({
      delta: e.target.value*1
    })
  }
  
  handleIncrement = e => {
    const {value ,delta} = this.state
    this.setState({
      value: value + delta
    })
  }
  
  handleDecrement = e => {
    const {value, delta} = this.state
    this.setState({
      value: value - delta
    })
  }

  handleAddIfOdd = () => {
    const {value, delta} = this.state
    if (value % 2 === 1) {
      this.setState({
        value: value + delta
      })
    }
  }

  handleAddDelay = () => {
    const {value,delta} = this.state
    setTimeout(() => {
      this.setState({
        value: value + delta
      })
    }, 300)
  }

  render() {
    const {value,delta} = this.state
    return (
      <div>
        <h1>当前求和: {value}</h1>
        <select onChange={this.handleSelect}>
          <option value={1}>1</option>
          <option value={1}>2</option>
          <option value={1}>3</option>
        </select> &nbsp;
        <button onClick={this.handleIncrement}>increment</button> &nbsp;
        <button onClick={this.handleDecrement}>decrement</button> &nbsp;
        <button onClick={this.handleAddIfOdd}>addIfOdd</button> &nbsp;
        <button onClick={this.handleAddDelay}>addDelay</button> &nbsp;
      </div>
    )
  }
}

export default Count